<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Buttons - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="dropdown-list"> <!-- example use with dropdown list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Dashboard</a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html">Dashboard #1</a></li>
                            <li><a href="index2.html">Dashboard #2</a></li>
                            <li><a href="index3.html">Dashboard #3</a></li>
                            <li><a href="index4.html">Dashboard #4</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Layouts</a>
                        <ul class="dropdown-menu">
                            <li><a href="layout-blank.html">Blank</a></li>
                            <li><a href="layout-full-width.html">Full Width</a></li>
                            <li><a href="layout-top-menus.html">Top Menus</a></li>
                        </ul>
                    </li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li class="dropdown-list active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Components</a>
                        <ul class="dropdown-menu">
                            <li><a href="ui-general.html">General</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li class="active"><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-alert-notify.html">Alert & Notify</a></li>
                            <li><a href="ui-gauge.html">Gauge</a></li>
                            <li><a href="ui-calendar.html">Calendar</a></li>
                            <li><a href="ui-scrollbar.html">Scrollbar</a></li>
                            <li><a href="ui-tabs-collapse.html">Tabs & Collapses</a></li>
                            <li><a href="ui-sliders-bars.html">Sliders & Bars</a></li>
                            <li><a href="ui-tiles.html">Tiles</a></li>
                            <li><a href="ui-appbar.html">Appbar</a></li>
                            <li><a href="ui-splash-page.html">Splash Page</a></li>
                            <li><a href="ui-media-object.html">Media Object</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Form</a>
                        <ul class="dropdown-menu">
                            <li><a href="form-widget.html">Form Widget</a></li>
                            <li><a href="form-elements.html">Elements</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Wysiwyg</a></li>
                            <li><a href="form-code-editor.html">Code editor</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-list">
                        <a href="charts.html" class="dropdown-toggle" data-toggle="dropdown-list">Charts</a>
                        <ul class="dropdown-menu">
                            <li><a href="chart-line.html">Lines Charts</a></li>
                            <li><a href="chart-bar.html">Bar Charts</a></li>
                            <li><a href="chart-pie.html">Pie Charts</a></li>
                            <li><a href="chart-others.html">Other Charts</a></li>
                        </ul>
                    </li>
                    <li><a href="grids.html">Grids</a></li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Tables</a>
                        <ul class="dropdown-menu">
                            <li><a href="table-basic.html">Basic</a></li>
                            <li><a href="table-datatables.html">DataTables</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="icons.html"><span class="label">3</span> Icons</a>
                    </li>
                    <li class="dropdown-list">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">Pages</a>
                        <ul class="dropdown-menu">
                            <li><a href="page-login.html">Login</a></li>
                            <li class="divider"></li>
                            <li><a href="page-search.html">Search</a></li>
                            <li><a href="page-invoices.html">Invoices</a></li>
                            <li><a href="page-inbox.html">Inbox</a></li>
                            <li><a href="page-gallery.html">Gallery</a></li>
                            <li class="divider"></li>
                            <li><a href="page-error-404.html">Error 404</a></li>
                            <li><a href="page-error-500.html">Error 500</a></li>
                            <li><a href="page-coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>
                </ul><!--/ nav -->
            </div><!--/ side left-->
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Actions <i class="aweso-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu black">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Some Action</a></li>
                                    <li><a href="#">Other Action</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button class="btn btn-link" data-content="widget"><i class="aweso-list-ul aweso-large" title="details view"></i></button>
                                <button class="btn btn-link" data-content="tile"><i class="aweso-th aweso-large" title="tile view"></i></button>
                            </div>
                        </li>
                        <li><button class="btn btn-link" data-toggle="button" data-content="toggle-pane"><i class="aweso-exchange aweso-large" title="toggle pane"></i></button></li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>Buttons</h1></div>

                    <!-- content breadcrumb -->
                    <ul class="breadcrumb breadcrumb-inline">
                        <li><a href="#">Home</a> <span class="divider"><i class="aweso-angle-right"></i></span></li>
                        <li class="active">Buttons</li>
                    </ul>
                </header> <!--/ content header -->
                
                <!-- content page -->
                <article class="content-page">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner">
                            <!-- Buttons
                            ================================================== -->
                            <!-- widget button -->
                            <div class="widget border-cyan" id="widget-button">
                                <!-- widget header -->
                                <div class="widget-header bg-cyan">
                                    <!-- widget title -->
                                    <h4 class="widget-title"><i class="aweso-magnet"></i> Buttons</h4>
                                    <!-- widget action, you can also use btn, btn-group, nav-tabs or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-button" class="btn">
                                            <i class="aweso-minus color-cyan" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content bg-white">
                                    <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <p>
                                        <button type="button" class="btn">Default</button>
                                        <button type="button" class="btn btn-primary">Primary</button>
                                        <button type="button" class="btn btn-info">Info</button>
                                        <button type="button" class="btn btn-success">Success</button>
                                        <button type="button" class="btn btn-warning">Warning</button>
                                        <button type="button" class="btn btn-danger">Danger</button>
                                        <button type="button" class="btn btn-inverse">Inverse</button>
                                        <button type="button" class="btn btn-link link">Link</button>
                                        </p>
                                        
                                        <p class="lead">Other Buttons</p>
                                        
                                        <p>
                                        <button type="button" class="btn btn-primary bg-amber">Amber</button>
                                        <button type="button" class="btn bg-black">Black</button>
                                        <button type="button" class="btn bg-brown">Brown</button>
                                        <button type="button" class="btn bg-cobalt">Cobalt</button>
                                        <button type="button" class="btn bg-crimson">Crimson</button>
                                        <button type="button" class="btn bg-cyan">Cyan</button>
                                        <button type="button" class="btn bg-emerald">Emerald</button>
                                        <button type="button" class="btn bg-green">Amber</button>
                                        <button type="button" class="btn bg-indigo">Green</button>
                                        <button type="button" class="btn bg-lime">Lime</button>
                                        </p>
                                        
                                        <p>
                                        <button type="button" class="btn bg-magenta">Magenta</button>
                                        <button type="button" class="btn bg-mauve">Mauve</button>
                                        <button type="button" class="btn bg-olive">Olive</button>
                                        <button type="button" class="btn bg-orange">Orange</button>
                                        <button type="button" class="btn bg-pink">Pink</button>
                                        <button type="button" class="btn bg-red">Red</button>
                                        <button type="button" class="btn bg-steel">Steel</button>
                                        <button type="button" class="btn bg-taupe">Taupe</button>
                                        <button type="button" class="btn bg-teal">Teal</button>
                                        <button type="button" class="btn bg-violet">Violet</button>
                                        <button type="button" class="btn bg-yellow">Yellow</button>
                                        </p>
                                    </div>

                                    <h2>Bordered</h2>
                                    <p>add class <code>bordered</code> to make button with border, you can also change border color with class <code>border-lime</code>, etc.</p>
                                    <div class="stilearn-block-demo bg-black">
                                        <p>
                                        <button type="button" class="btn bordered">Default</button>
                                        <button type="button" class="btn btn-primary bordered">Primary</button>
                                        <button type="button" class="btn btn-info bordered">Info</button>
                                        <button type="button" class="btn btn-success bordered">Success</button>
                                        <button type="button" class="btn btn-warning bordered">Warning</button>
                                        <button type="button" class="btn btn-danger bordered">Danger</button>
                                        <button type="button" class="btn btn-inverse bordered">Inverse</button>
                                        </p>
                                        
                                        <p class="lead">Other Buttons</p>
                                        
                                        <p>
                                        <button type="button" class="btn bordered bg-amber">Amber</button>
                                        <button type="button" class="btn bordered bg-black">Black</button>
                                        <button type="button" class="btn bordered bg-brown">Brown</button>
                                        <button type="button" class="btn bordered bg-cobalt">Cobalt</button>
                                        <button type="button" class="btn bordered bg-crimson">Crimson</button>
                                        <button type="button" class="btn bordered bg-cyan">Cyan</button>
                                        <button type="button" class="btn bordered bg-emerald">Emerald</button>
                                        <button type="button" class="btn bordered bg-green">Amber</button>
                                        <button type="button" class="btn bordered bg-indigo">Green</button>
                                        <button type="button" class="btn bordered bg-lime">Lime</button>
                                        </p>
                                        
                                        <p>
                                        <button type="button" class="btn bordered bg-magenta">Magenta</button>
                                        <button type="button" class="btn bordered bg-mauve">Mauve</button>
                                        <button type="button" class="btn bordered bg-olive">Olive</button>
                                        <button type="button" class="btn bordered bg-orange">Orange</button>
                                        <button type="button" class="btn bordered bg-pink">Pink</button>
                                        <button type="button" class="btn bordered bg-red">Red</button>
                                        <button type="button" class="btn bordered bg-steel">Steel</button>
                                        <button type="button" class="btn bordered bg-taupe">Taupe</button>
                                        <button type="button" class="btn bordered bg-teal">Teal</button>
                                        <button type="button" class="btn bordered bg-violet">Violet</button>
                                        <button type="button" class="btn bordered bg-yellow">Yellow</button>
                                        </p>
                                    </div>

                                    <h2>Button sizes</h2>
                                    <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <p>
                                            <button type="button" class="btn btn-large btn-primary">Large button</button>
                                            <button type="button" class="btn btn-large">Large button</button>
                                        </p>
                                        <p>
                                            <button type="button" class="btn btn-primary">Default button</button>
                                            <button type="button" class="btn">Default button</button>
                                        </p>
                                        <p>
                                            <button type="button" class="btn btn-small btn-primary">Small button</button>
                                            <button type="button" class="btn btn-small">Small button</button>
                                        </p>
                                        <p>
                                            <button type="button" class="btn btn-mini btn-primary">Mini button</button>
                                            <button type="button" class="btn btn-mini">Mini button</button>
                                        </p>
                                    </div>

                                    <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
                                            <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
                                            <button type="button" class="btn btn-large btn-block">Block level button</button>
                                        </div>
                                    </div>

                                    <h2>Disabled state</h2>
                                    <p>Make buttons look unclickable by fading them back 50%.</p>
                                    <p class="stilearn-block-demo bg-silver">
                                        <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
                                        <a href="#" class="btn btn-large disabled">Link</a>
                                    </p>
                                    <p class="stilearn-block-demo bg-silver">
                                        <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
                                        <button type="button" class="btn btn-large" disabled="">Button</button>
                                    </p>

                                    <h2>One class, multiple tags</h2>
                                    <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
                                    <form class="stilearn-block-demo bg-silver" />
                                        <a class="btn" href="">Link</a>
                                        <button class="btn" type="submit">Button</button>
                                        <input class="btn" type="button" value="Input" />
                                        <input class="btn" type="submit" value="Submit" />
                                    </form>
                                </div><!-- /widget content -->
                            </div> <!-- /default widget -->




                            <!-- Dropdown Menus
                            ================================================== -->
                            <!-- widget dropdown menus -->
                            <div class="widget border-amber" id="widget-dropdowns">
                                <!-- widget header -->
                                <div class="widget-header bg-amber">
                                    <!-- widget title -->
                                    <h4 class="widget-title"><i class="aweso-magnet"></i> Dropdown menus</h4>
                                    <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-dropdowns" class="btn">
                                            <i class="aweso-minus color-amber" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <!-- default dropdown -->
                                    <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a class="link" target="_blank" href="http://twitter.github.io/bootstrap/javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
                                    <div class="stilearn-block-demo stilearn-block-demo-submenus bg-silver">
                                        <div class="pull-left">
                                            <!-- default -->
                                            <div class="dropdown clearfix">
                                                <ul id="dropdown-menu" class="dropdown-menu amber" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                                                    <li class="active"><a tabindex="-1" href="#">Action</a></li>
                                                    <li><a tabindex="-1" href="#">Another action</a></li>
                                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a tabindex="-1" href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>

                                        <h4>Choose a color:</h4>
                                        <ul class="theme-switcher" data-target="#dropdown-menu" data-target-class="dropdown-menu">
                                            <li><a href="#" class="bg-lime" data-theme="lime">Lime</a></li>
                                            <li><a href="#" class="bg-green" data-theme="green">Green</a></li>
                                            <li><a href="#" class="bg-emerald" data-theme="emerald">Emerald</a></li>
                                            <li><a href="#" class="bg-teal" data-theme="teal">Teal</a></li>
                                            <li><a href="#" class="bg-cyan" data-theme="cyan">Cyan</a></li>
                                            <li><a href="#" class="bg-cobalt" data-theme="cobalt">Cobalt</a></li>
                                            <li><a href="#" class="bg-indigo" data-theme="indigo">Indigo</a></li>
                                            <li><a href="#" class="bg-violet" data-theme="violet">Violet</a></li>
                                            <li><a href="#" class="bg-pink" data-theme="pink">Pink</a></li>
                                            <li><a href="#" class="bg-magenta" data-theme="magenta">Magenta</a></li>
                                            <li><a href="#" class="bg-crimson" data-theme="crimson">Crimson</a></li>
                                            <li><a href="#" class="bg-red" data-theme="red">Red</a></li>
                                            <li><a href="#" class="bg-orange" data-theme="orange">Orange</a></li>
                                            <li><a href="#" class="bg-amber" data-theme="amber">Amber</a></li>
                                            <li><a href="#" class="bg-yellow" data-theme="yellow">Yellow</a></li>
                                            <li><a href="#" class="bg-brown" data-theme="brown">Brown</a></li>
                                            <li><a href="#" class="bg-olive" data-theme="olive">Olive</a></li>
                                            <li><a href="#" class="bg-steel" data-theme="steel">Steel</a></li>
                                            <li><a href="#" class="bg-mauve" data-theme="mauve">Mauve</a></li>
                                            <li><a href="#" class="bg-taupe" data-theme="taupe">Taupe</a></li>
                                            <li><a href="#" class="bg-black" data-theme="black">Black</a></li>
                                            <li><a href="#" class="bg-silver" data-theme="silver">Silver</a></li>
                                        </ul>
                                    </div><!-- /default dropdown -->

                                    <!-- dropdown submenus -->
                                    <h3>Sub menus on dropdowns</h3>
                                    <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
                                    <div class="stilearn-block-demo stilearn-block-demo-submenus bg-silver">

                                        <div class="pull-left">
                                            <p>Default</p>
                                            <div class="dropdown clearfix">
                                                <ul class="dropdown-menu lime" role="menu" aria-labelledby="dropdownMenu">
                                                    <li><a tabindex="-1" href="#">Action</a></li>
                                                    <li><a tabindex="-1" href="#">Another action</a></li>
                                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li class="dropdown-submenu">
                                                        <a tabindex="-1" href="#">More options</a>
                                                        <ul class="dropdown-menu lime">
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="pull-left">
                                            <p>Different Colour</p>
                                            <div class="dropdown clearfix">
                                                <ul class="dropdown-menu magenta" role="menu" aria-labelledby="dropdownMenu">
                                                    <li><a tabindex="-1" href="#">Action</a></li>
                                                    <li><a tabindex="-1" href="#">Another action</a></li>
                                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li class="dropdown-submenu">
                                                        <a tabindex="-1" href="#">More options</a>
                                                        <ul class="dropdown-menu teal">
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="pull-left">
                                            <p>Dropup</p>
                                            <div class="dropup">
                                                <ul class="dropdown-menu cyan" role="menu" aria-labelledby="dropdownMenu">
                                                    <li><a tabindex="-1" href="#">Action</a></li>
                                                    <li><a tabindex="-1" href="#">Another action</a></li>
                                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li class="dropdown-submenu">
                                                        <a tabindex="-1" href="#">More options</a>
                                                        <ul class="dropdown-menu cyan">
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="pull-left">
                                            <p>Left submenu</p>
                                            <div class="dropdown">
                                                <ul class="dropdown-menu orange" role="menu" aria-labelledby="dropdownMenu">
                                                    <li><a tabindex="-1" href="#">Action</a></li>
                                                    <li><a tabindex="-1" href="#">Another action</a></li>
                                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li class="dropdown-submenu pull-left">
                                                        <a tabindex="-1" href="#">More options</a>
                                                        <ul class="dropdown-menu orange">
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                            <li><a tabindex="-1" href="#">Second level link</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div><!-- /dropdown submenus -->

                                </div><!-- /widget content -->
                            </div> <!-- /widget dropdown menus -->



                            <!-- Dropdown extends
                            ================================================== -->
                            <!-- widget dropdown extends -->
                            <div class="widget border-teal" id="widget-dropdowns-extends">
                                <!-- widget header -->
                                <div class="widget-header bg-teal">
                                    <!-- widget title -->
                                    <h4 class="widget-title"><i class="aweso-magnet"></i> Dropdown extends</h4>
                                    <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-dropdowns-extends" class="btn">
                                            <i class="aweso-minus color-teal" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <!-- Extends dropdown -->
                                    <p>This is another style of bootstrap dropdown menu. For some cases, you might need it.</p>
                                    <h2>Dropdown Extends</h2>
                                    <div class="stilearn-block-demo stilearn-block-demo-submenus bg-silver">
                                        <div class="pull-left" style="min-width: 300px;">
                                            <!-- default -->
                                            <p>Basic</p>
                                            <div class="dropdown clearfix">
                                                <ul class="dropdown-menu dropdown-extend teal dropdown-theme-demo" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                                                    <li class="dropdown-header">Dropdown Header</li>
                                                    <li><a tabindex="-1" href="#">Action</a></li>
                                                    <li><a tabindex="-1" href="#">Another action</a></li>
                                                    <li class="active"><a tabindex="-1" href="#">Active action</a></li>
                                                    <li><a tabindex="-1" href="#">Something Else</a></li>
                                                    <li class="dropdown-footer"><a href="#"> <i class="icomo-arrow-right pull-right"></i>Dropdown Footer</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="pull-left" style="min-width: 300px;">
                                            <p>Notification</p>
                                            <div class="dropdown clearfix">
                                                <ul class="dropdown-menu dropdown-extend teal dropdown-theme-demo" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; max-width:260px;">
                                                    <li class="dropdown-header">You have 4 new notofications</li>
                                                    <li>
                                                        <a tabindex="-1" href="#">
                                                            <div class="media">
                                                                <div class="pull-left">
                                                                    <img class="media-object" data-src="holder.js/32x32/gray/text:avatar" />
                                                                </div>
                                                                <div class="media-body">
                                                                    <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                                    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a tabindex="-1" href="#">
                                                            <div class="media">
                                                                <div class="pull-left">
                                                                    <img class="media-object" data-src="holder.js/32x32/gray/text:avatar" />
                                                                </div>
                                                                <div class="media-body">
                                                                    <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                                    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a tabindex="-1" href="#">
                                                            <div class="media">
                                                                <div class="pull-left">
                                                                    <img class="media-object" data-src="holder.js/32x32/gray/text:avatar" />
                                                                </div>
                                                                <div class="media-body">
                                                                    <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                                    <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="dropdown-footer">
                                                        <a tabindex="-1" href="#"><i class="icomo-arrow-right pull-right"></i> See all notifications</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="pull-left" style="min-width: 300px;">
                                            <p>Task</p>
                                            <div class="dropdown clearfix">
                                                <ul class="dropdown-menu dropdown-extend teal dropdown-theme-demo" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px; max-width:260px;">
                                                    <li class="dropdown-header">You have 6 tasks</li>
                                                    <li>
                                                        <a tabindex="-1" href="#">
                                                            <div class="media">
                                                                <div class="media-body">
                                                                    <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                                    <div class="progress progress-info">
                                                                        <div class="bar" style="width: 20%"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a tabindex="-1" href="#">
                                                            <div class="media">
                                                                <div class="media-body">
                                                                    <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                                    <div class="progress progress-info">
                                                                        <div class="bar" style="width: 60%"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a tabindex="-1">
                                                            <div class="media">
                                                                <div class="media-body">
                                                                    <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                                    <div class="progress progress-danger">
                                                                        <div class="bar" style="width: 80%"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a tabindex="-1" href="#">
                                                            <div class="media">
                                                                <div class="media-body">
                                                                    <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                                    <div class="progress progress-success">
                                                                        <div class="bar" style="width: 100%"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="dropdown-footer">
                                                        <a tabindex="-1" href="#"><i class="icomo-arrow-right pull-right"></i> See all tasks</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>

                                        <h4>Choose a theme:</h4>
                                        <ul class="theme-switcher" data-target=".dropdown-theme-demo" data-target-class="dropdown-menu dropdown-extend dropdown-theme-demo">
                                            <li><a href="#" class="bg-lime" data-theme="lime">Lime</a></li>
                                            <li><a href="#" class="bg-green" data-theme="green">Green</a></li>
                                            <li><a href="#" class="bg-emerald" data-theme="emerald">Emerald</a></li>
                                            <li><a href="#" class="bg-teal" data-theme="teal">Teal</a></li>
                                            <li><a href="#" class="bg-cyan" data-theme="cyan">Cyan</a></li>
                                            <li><a href="#" class="bg-cobalt" data-theme="cobalt">Cobalt</a></li>
                                            <li><a href="#" class="bg-indigo" data-theme="indigo">Indigo</a></li>
                                            <li><a href="#" class="bg-violet" data-theme="violet">Violet</a></li>
                                            <li><a href="#" class="bg-pink" data-theme="pink">Pink</a></li>
                                            <li><a href="#" class="bg-magenta" data-theme="magenta">Magenta</a></li>
                                            <li><a href="#" class="bg-crimson" data-theme="crimson">Crimson</a></li>
                                            <li><a href="#" class="bg-red" data-theme="red">Red</a></li>
                                            <li><a href="#" class="bg-orange" data-theme="orange">Orange</a></li>
                                            <li><a href="#" class="bg-amber" data-theme="amber">Amber</a></li>
                                            <li><a href="#" class="bg-yellow" data-theme="yellow">Yellow</a></li>
                                            <li><a href="#" class="bg-brown" data-theme="brown">Brown</a></li>
                                            <li><a href="#" class="bg-olive" data-theme="olive">Olive</a></li>
                                            <li><a href="#" class="bg-steel" data-theme="steel">Steel</a></li>
                                            <li><a href="#" class="bg-mauve" data-theme="mauve">Mauve</a></li>
                                            <li><a href="#" class="bg-taupe" data-theme="taupe">Taupe</a></li>
                                            <li><a href="#" class="bg-black" data-theme="black">Black</a></li>
                                            <li><a href="#" class="bg-silver" data-theme="silver">Silver</a></li>
                                        </ul>
                                    </div><!-- /default dropdown -->

                                    <!-- dropdown submenus -->
                                    <h3>Use as sub menus</h3>
                                    <p>Add an extra level of dropdown extend, you can use it like a <a class="link" data-scroll="true" href="ui-buttons.html#widget-dropdowns">dropdown menu</a>.</p>
                                    <!-- /dropdown submenus -->

                                </div><!-- /widget content -->
                            </div> <!-- /widget dropdown extends -->



                            <!-- Button Groups
                            ================================================== -->
                            <!-- widget button groups -->
                            <div class="widget border-black" id="widget-buttonGroups">
                                <!-- widget header -->
                                <div class="widget-header bg-black">
                                    <!-- widget title -->
                                    <h4 class="widget-title"><i class="aweso-magnet"></i> Button groups</h4>
                                    <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-buttonGroups" class="btn">
                                            <i class="aweso-minus color-black" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <!-- single button group -->
                                    <h3>Single button group</h3>
                                    <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-group" style="margin: 9px 0 5px;">
                                            <button class="btn">Left</button>
                                            <button class="btn">Middle</button>
                                            <button class="btn">Right</button>
                                        </div>
                                    </div>

                                    <!-- multiple button group -->
                                    <h3>Multiple button groups</h3>
                                    <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-toolbar">
                                            <div class="btn-group">
                                                <button class="btn">1</button>
                                                <button class="btn">2</button>
                                                <button class="btn">3</button>
                                                <button class="btn">4</button>
                                            </div>
                                            <div class="btn-group">
                                                <button class="btn">5</button>
                                                <button class="btn">6</button>
                                                <button class="btn">7</button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- vertical button group -->
                                    <h3>Vertical button groups</h3>
                                    <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-group btn-group-vertical">
                                            <button type="button" class="btn"><i class="icon-align-left"></i></button>
                                            <button type="button" class="btn"><i class="icon-align-center"></i></button>
                                            <button type="button" class="btn"><i class="icon-align-right"></i></button>
                                            <button type="button" class="btn"><i class="icon-align-justify"></i></button>
                                        </div>
                                    </div>

                                    <h3>bootstrap-button.js</h3>
                                    <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
                                    <div class="stilearn-block-demo stilearn-block-demo-pull bg-silver">
                                        <div class="pull-left">
                                            <p>Stateful</p>
                                            <button type="button" id="btn-state" class="btn" data-loading-text="Loading...">Loading state</button>
                                        </div>
                                        <div class="pull-left">
                                            <p>Single toggle</p>
                                            <button type="button" class="btn" data-toggle="button">Single Toggle</button>
                                        </div>
                                        <div class="pull-left">
                                            <p>Checkbox</p>
                                            <div class="btn-group" data-toggle="buttons-checkbox">
                                                <button type="button" class="btn">Left</button>
                                                <button type="button" class="btn">Middle</button>
                                                <button type="button" class="btn">Right</button>
                                            </div>
                                        </div>
                                        <div class="pull-left">
                                            <p>Radio</p>
                                            <div class="btn-group" data-toggle="buttons-radio">
                                                <button type="button" class="btn">Left</button>
                                                <button type="button" class="btn">Middle</button>
                                                <button type="button" class="btn">Right</button>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>

                                </div><!-- /widget content -->
                            </div> <!-- /widget button groups -->


                            <!-- Split button dropdowns
                            ================================================== -->
                            <!-- widget button dropdowns -->
                            <div class="widget border-steel" id="widget-buttonDropdowns">
                                <!-- widget header -->
                                <div class="widget-header bg-steel">
                                    <!-- widget title -->
                                    <h4 class="widget-title"><i class="aweso-magnet"></i> Button dropdown menus</h4>
                                    <!-- widget action, you can also the btn, btn-group, or nav-pills (also support dropdown). enjoy! -->
                                    <div class="widget-action">
                                        <button data-toggle="collapse" data-collapse="#widget-buttonDropdowns" class="btn">
                                            <i class="aweso-minus color-steel" data-toggle-icon="aweso-minus aweso-plus"></i>
                                        </button>
                                    </div>
                                </div><!-- /widget header -->

                                <!-- widget content -->
                                <div class="widget-content">
                                    <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-toolbar">
                                            <div class="btn-group">
                                                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                <ul class="dropdown-menu silver">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
                                                <ul class="dropdown-menu red">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
                                                <ul class="dropdown-menu orange">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
                                                <ul class="dropdown-menu green">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
                                                <ul class="dropdown-menu sky">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
                                                <ul class="dropdown-menu black">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div><!-- /btn-toolbar -->
                                    </div><!-- /stilearn-block-demo -->

                                    <!-- Split button dropdowns -->
                                    <h2>Split button dropdowns</h2>
                                    <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-toolbar" style="margin: 0;">
                                            <div class="btn-group">
                                                <button class="btn">Action</button>
                                                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu silver">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-primary">Action</button>
                                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-danger">Danger</button>
                                                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu red">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-warning">Warning</button>
                                                <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu orange">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-success">Success</button>
                                                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu green">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-info">Info</button>
                                                <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu sky">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group">
                                                <button class="btn btn-inverse">Inverse</button>
                                                <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu black">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div><!-- /btn-toolbar -->
                                    </div><!-- /stilearn-block-demo -->

                                    <!-- Sizes -->
                                    <h3>Sizes</h3>
                                    <p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-toolbar">
                                            <div class="btn-group">
                                                <button class="btn btn-large">Large action</button>
                                                <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu silver">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div><!-- /btn-toolbar -->
                                        <div class="btn-toolbar">
                                            <div class="btn-group">
                                                <button class="btn btn-small">Small action</button>
                                                <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu silver">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div><!-- /btn-toolbar -->
                                        <div class="btn-toolbar">
                                            <div class="btn-group">
                                                <button class="btn btn-mini">Mini action</button>
                                                <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu silver">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div><!-- /btn-toolbar -->
                                    </div><!-- /stilearn-block-demo -->

                                    <!-- Dropup menus -->
                                    <h3>Dropup menus</h3>
                                    <p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
                                    <div class="stilearn-block-demo bg-silver">
                                        <div class="btn-toolbar" style="margin: 0;">
                                            <div class="btn-group dropup">
                                                <button class="btn">Dropup</button>
                                                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu silver">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                            <div class="btn-group dropup">
                                                <button class="btn btn-primary">Right dropup</button>
                                                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                                <ul class="dropdown-menu pull-right">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div><!-- /btn-group -->
                                        </div>
                                    </div><!-- /stilearn-block-demo -->
                                    
                                </div><!-- /widget content -->
                            </div> <!-- /widget button dropdowns -->

                        </div><!-- /content-inner-->
                    </div><!-- /main-page-->

                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/sparkline/jquery.sparkline.min.js"></script>
        
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript" src="js/metro-base.js"></script>
        <script type="text/javascript">
            $(function(){
                'use strict';
                
                // button state demo
                $('#btn-state').on('click', function () {
                    var btn = $(this)
                    btn.button('loading')
                    setTimeout(function () {
                      btn.button('reset')
                    }, 3000)
                  })
            })
        </script>
    </body>
</html>
